<template>
    <div class="activity-list-container">
        <el-card shadow="never" class="mb-5 border-box">
            <div class="filter-section">
                <div class="left-section">
                    <div class="search-box">
                        <el-input
                            v-model="searchKeyword"
                            placeholder="搜索活动标题"
                            class="search-input"
                            :prefix-icon="Search"
                            clearable
                            @input="handleSearch"
                        />
                    </div>
                    <el-button type="primary" @click="toAddActivity">
                        <el-icon>
                            <Plus />
                        </el-icon>
                        发布活动
                    </el-button>
                </div>
                <div class="filter-box ">
                    
                    <el-radio-group v-model="strategyType" size="default" @change="strategyByType">
                        <el-radio-button :label="1" :value="1">官网</el-radio-button>
                    </el-radio-group>
                </div>
            </div>
        </el-card>
        <div class="page-content activity-list">
            <div v-if="!showEmpty" class="list h-[calc(100vh-327px)] overflow-y-auto">
                <div class="offset">
                    <div
                        class="item stats-card"
                        v-for="item in activityList"
                        :key="item.id"
                        @click="toDetail(item)"
                    >
                        <!-- 骨架屏 -->
                        <el-skeleton
                            animated
                            :loading="isLoading"
                           class="w-full h-full"
                        >
                            <template #template>
                                <div class="top">
                                    <el-skeleton-item
                                        variant="image"
                                        style="width: 100%; height: 100%; border-radius: 10px"
                                    />
                                    <div style="padding: 16px 0">
                                        <el-skeleton-item variant="p" style="width: 80%" />
                                        <el-skeleton-item
                                            variant="p"
                                            style="width: 40%; margin-top: 10px"
                                        />
                                    </div>
                                </div>
                            </template>

                            <template #default>
                                <div class="top w-full h-168px flex flex-col">
                                    <!-- <el-image class="cover" :src="item.imageUrl" lazy fit="cover">
                                        <template #error>
                                            <div class="image-slot">
                                                <el-icon><icon-picture /></el-icon>
                                            </div>
                                        </template>
                                    </el-image> -->
                                    <el-image
                                        class="cover attraction-image w-full h-168px object-cover"
                                        lazy
                                        :src="item.imageUrl"
                                        fit="cover"
                                        >
                                        <template #error>
                                            <div
                                            class="image-slot flex justify-center items-center w-full h-full bg-fill-light text-text-secondary text-30px"
                                            >
                                            <el-icon>
                                                <Picture />
                                            </el-icon>
                                            </div>
                                        </template>
                                    </el-image>
                                    <!-- <span class="type">{{ item.activityName }}</span> -->
                                    <span
                                        class="status-tag"
                                        :class="getStatusClass(item.activityStatus)"
                                        >{{ getStatusText(item.activityStatus) }}</span
                                    >
                                </div>
                                <div class="p-3">
                                <div class="bottom">
                                    <h2>{{ item.description }}</h2>
                                    <div class="info">
                                        <div class="text">
                                            <i class="iconfont-sys">&#xe6f7;</i>
                                            <span>{{
                                                useDateFormat(item.startTime, 'YYYY-MM-DD')
                                            }}</span>
                                            <div class="line"></div>
                                            <i class="iconfont-sys">&#xe689;</i>
                                            <span>{{ item.browseCount }}</span>
                                        </div>

                                    </div>
                                </div>
                                <div class="flex justify-end">
                                    <el-button
                                    type="primary"
                                    text
                                    size="small"
                                    @click.stop="toEdit(item)"
                                    >  
                                    <el-icon><Edit /></el-icon>
                                    编辑
                                    </el-button
                                >
                                <el-button
                                    type="danger"
                                    text
                                    size="small"
                                    @click.stop="confirmDelete(item)"
                                    >
                                    <el-icon><Delete /></el-icon>
                                    删除
                                    </el-button
                                >
                                </div>
                                </div>
                            </template>
                        </el-skeleton>
                    </div>
                </div>
            </div>

            <!-- 空状态 -->
            <div  class="flex justify-center h-[calc(100vh-307px)]" v-if="showEmpty">
                <el-empty description="暂无活动数据" />
            </div>

            <!-- 分页器 -->
            <div class="flex justify-center">
                <el-pagination
                    v-model:current-page="currentPage"
                    v-model:page-size="pageSize"
                    :page-sizes="[8, 16, 24, 32]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    :hide-on-single-page="false"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { Picture as IconPicture, Plus } from '@element-plus/icons-vue'
    import { ref, onMounted, computed } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    import { useDateFormat } from '@vueuse/core'
    import { Search } from '@element-plus/icons-vue'
    import { ElMessage } from 'element-plus'
    import {
        scenicActivityDeleteActivityUsingPost,
        scenicActivityPageActivityUsingPost,
    } from '@/api/4a/huodongguanli'
    import { activityList } from '@/types/activityManagement'

    const route = useRoute()
    const router = useRouter()
    const activityList = ref<activityList[]>([])
    const total = ref(0)
    const isLoading = ref(true)
    const currentPage = ref(1) // 当前页码
    const searchKeyword = ref('') // 搜索关键字
    const strategyType = ref(1) // 发布策略
    const sendStatus = ref(2) // 发布状态
    const pageSize = ref(8) // 每页条数
    const activityId = ref() //活动id
    // 请求参数
    const formData = ref({
        current: 1,
        like: '',
        activityAuthorId: undefined,
        sendStatus: 2,
        size: 8,
        strategyType: 1
    })

    // 获取状态文本
    const getStatusText = (status:number) => {
        switch (status) {
            case 1:
                return '未开始'
            case 2:
                return '进行中'
            case 3:
                return '已结束'
            default:
                return '未知'
        }
    }

    // 获取状态样式类
    const getStatusClass = (status:number) => {
        switch (status) {
            case 1:
                return 'status-coming'
            case 2:
                return 'status-ongoing'
            case 3:
                return 'status-ended'
            default:
                return ''
        }
    }

    // 获取活动列表
    const getActivityList = () => {
        isLoading.value = true
        try {
            formData.value.current = currentPage.value
            formData.value.like = searchKeyword.value
            formData.value.strategyType = strategyType.value
            formData.value.sendStatus = sendStatus.value
            scenicActivityPageActivityUsingPost({
                body: {
                    current: currentPage.value,
                    size: pageSize.value,
                    like: searchKeyword.value,
                    strategyType: strategyType.value
                }
            }).then((res) => {
                if (res.code === 0) {
                    activityList.value = res.data?.list
                    total.value = res.data?.total || 0
                    isLoading.value = false
                    activityList.value.forEach((item) => {
                        item.imageUrl = JSON.parse(item.imageUrl)[0]?.path || '[]'
                    })
                }
            })
        } catch (error) {
            console.error('获取活动列表失败', error)
            ElMessage.error('获取活动列表失败')
        } finally {
            isLoading.value = false
        }
    }
    // 策略切换
    const strategyByType = () => {
        formData.value.strategyType = strategyType.value
        getActivityList()
    }

    onMounted(() => {
        activityId.value = String(route.query.id || '')
        getActivityList()
    })
    // 处理页码大小变化
    const handleSizeChange = (val: number) => {
        pageSize.value = val
        currentPage.value = 1
        getActivityList()
    }
    // 分页切换
    const handleCurrentChange = (val: number) => {
        currentPage.value = val
        getActivityList()
    }
    // 跳转详情
    const toDetail = (item: any) => {
        router.push({
            path: `/activity/detail`,
            query: {
                id: item.id
            }
        })
    }

    // 编辑活动
    const toEdit = (item: any) => {
        router.push({
            path: `/activity/activity-publish`,
            query: {
                id: item.id
            }
        })
    }

    // 是否确定删除活动
    const confirmDelete = (item: any) => {
        ElMessageBox.confirm(
            `确定要删除活动 "${item.activityName}" 吗？此操作不可恢复！`,
            '删除提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }
        )
            .then(() => {
                deleteAttraction(item.id)
            })
            .catch(() => {
                // 取消删除
                ElMessage.error('取消删除')
            })
    }

    //删除活动
    const deleteAttraction = async (item: number) => {
        try {
            const res = await scenicActivityDeleteActivityUsingPost({
                params: {
                    activityId: item
                }
            })
            if (res.code !== 0) {
                ElMessage.error(res.msg)
                return
            }
            ElMessage.success('删除活动成功')
            getActivityList()
        } catch (error) {
            console.error('删除活动失败', error)
            ElMessage.error('删除活动失败')
        }
    }

    // 搜索活动
    const handleSearch = () => {
        currentPage.value = 1
        getActivityList()
    }

    // 新增活动
    const toAddActivity = () => {
        router.push({
            path: `/activity/activity-publish`
        })
    }
    // 空状态判断
    const showEmpty = computed(() => {
        return activityList.value.length === 0 && !isLoading.value
    })

    // 监听路由变化
    onActivated(() => {
        getActivityList()
    })
</script>

<style lang="scss" scoped>
    .activity-list-container {
        min-height: calc(100vh - 121px);
    }

    .filter-section {
        display: flex;
        align-items: center;
        justify-content: space-between;
        // padding: 16px;
        // margin-bottom: 20px;
        // background: #fff;
        border-radius: 8px;
        // box-shadow: 0 2px 12px 0 rgb(0 0 0 / 5%);
        // border: 1px solid var(--art-card-border) !important;
        .left-section {
            display: flex;
            gap: 16px;
            align-items: center;
            .search-box {
                width: 300px;

                .search-input {
                    width: 100%;
                }
            }
        }

        .filter-box {
            .el-radio-group {
                display: flex;
                gap: 8px;
            }
        }
    }

    .activity-list {
        .custom-segmented .el-segmented {
            height: 40px;
            padding: 6px;

            --el-border-radius-base: 8px;
        }

        .list {
            margin-top: 20px;

            .offset {
                display: flex;
                flex-wrap: wrap;
                width: calc(100% + 20px);

                .item {
                    box-sizing: border-box;
                    width: calc(25% - 20px);
                    margin: 0 20px 20px 0;
                    cursor: pointer;
                    border: 1px solid var(--art-border-color);
                    border-radius: calc(var(--custom-radius) / 2 + 2px) !important;

                    &:hover {
                        .el-button {
                            opacity: 1 !important;
                        }
                    }

                    .top {
                        position: relative;
                        // aspect-ratio: 16/8.5;

                        .cover {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            // width: 100%;
                            // height: 100%;
                            // object-fit: cover;
                            background: var(--art-gray-200);
                            border-radius: calc(var(--custom-radius) / 2 + 2px)
                                calc(var(--custom-radius) / 2 + 2px) 0 0;

                            // .image-slot {
                            //     font-size: 26px;
                            //     color: var(--art-gray-400);
                            // }
                        }

                        .type {
                            position: absolute;
                            top: 5px;
                            right: 5px;
                            padding: 5px 4px;
                            font-size: 12px;
                            color: rgba(#fff, 0.8);
                            background: rgba($color: #000, $alpha: 60%);
                            border-radius: 4px;
                        }

                        .status-tag {
                            position: absolute;
                            top: 5px;
                            left: 5px;
                            padding: 5px 8px;
                            font-size: 12px;
                            color: #fff;
                            border-radius: 4px;

                            &.status-coming {
                                background-color: #409eff;
                            }

                            &.status-ongoing {
                                background-color: #67c23a;
                            }

                            &.status-ended {
                                background-color: #909399;
                            }
                        }
                    }

                    .bottom {
                        // padding: 5px 1px;

                        h2 {
                            font-size: 16px;
                            font-weight: 500;
                            color: #333;

                            @include ellipsis();
                        }

                        .info {
                            display: flex;
                            justify-content: space-between;
                            width: 100%;
                            height: 25px;
                            margin-top: 6px;
                            line-height: 25px;

                            .text {
                                display: flex;
                                align-items: center;
                                color: var(--art-text-gray-600);

                                i {
                                    margin-right: 5px;
                                    font-size: 14px;
                                }

                                span {
                                    font-size: 13px;
                                    color: var(--art-gray-600);
                                }

                                .line {
                                    width: 1px;
                                    height: 12px;
                                    margin: 0 15px;
                                    background-color: var(--art-border-dashed-color);
                                }
                            }

                            .el-button {
                                opacity: 0;
                                transition: all 0.3s;
                            }
                        }
                    }
                }
            }
        }
    }

    .border-box {
        border-radius: 8px !important;
    }

    @media only screen and (max-width: $device-notebook) {
        .activity-list {
            .list {
                .offset {
                    .item {
                        width: calc(25% - 20px);
                    }
                }
            }
        }
    }

    @media only screen and (max-width: $device-ipad-pro) {
        .activity-list {
            .list {
                .offset {
                    .item {
                        width: calc(33.333% - 20px);

                        .bottom {
                            h2 {
                                font-size: 16px;
                            }
                        }
                    }
                }
            }
        }
    }

    @media only screen and (max-width: $device-ipad) {
        .activity-list {
            .list {
                .offset {
                    .item {
                        width: calc(50% - 20px);
                    }
                }
            }
        }
    }

    .stats-card{
        cursor: pointer;
        box-shadow: none;
        transition: transform 0.2s ease;

        &:hover {
        transform: translateY(-2px)
        }
    }

    @media only screen and (max-width: $device-phone) {
        .activity-list {
            .list {
                .offset {
                    .item {
                        width: calc(100% - 20px);
                    }
                }
            }
        }
    }
</style>
